<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"/>
		<link rel="stylesheet" href="./1_index.css">
		<title>rem适配方案一配合less</title>
	</head>
	<body>
		<div id="demo"></div>
		<script type="text/javascript" >
			//根字体 = (手机横向设备独立像素值 * 100 )  / 设计稿宽度
			function adapter (){
				//此处表面获取的是布局视口的宽度，但因为开启了理想视口，所有获取到的也是设备独立像素
				const dip = document.documentElement.clientWidth
				//计算根字体
				const rootFontSize  = (dip * 100)/375
				//设置根字体
				document.documentElement.style.fontSize = rootFontSize+'px'
			}
			adapter()

			//监测布局视口的改变
			window.onresize = adapter
			
		</script>
	</body>
</html>